<template>
    <div class="box">
        <img src="../assets/index.png" alt="">
        <div class="content">
            <div class="bg">
                <div class="title">
                    <img src="../assets/wddx.png" alt="">
                    <span>我的大学</span>
                </div>
                <div class="nav">
                    <!-- 循环写法 -->
                    <div class="item" v-for="item in items" :key="item">
                        <img :src="item.img" alt="">
                        <span>{{ item.title }}</span>
                    </div>
                </div>
                <!--校园风采模块 -->
                <div class="xyfc">
                    <div>校园风采</div>
                    <div>查看更多<img src="../assets/arrow_right.png" alt=""></div>
                </div>
                <div class="xyfc-img">
                    <div>
                        <img src="../assets/xyfc_1.png" alt="">
                    </div>
                    <div>
                        <img src="../assets/xyfc_2.png" alt="">
                        <img src="../assets/xyfc_3.png" alt="">
                    </div>
                </div>
                <div class="xyfc-zyfw">
                    <div>专业服务</div>
                    <div class="xyfw-zyfw-content">
                        <div>
                            <img src="../assets/01.png" alt="">
                            <p>技能提升</p>
                        </div>
                        <div>
                            <img src="../assets/02.png" alt="">
                            <p>学历提升</p>
                        </div>
                        <div>
                            <img src="../assets/03.png" alt="">
                            <p>报考指南</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 我的城 -->
            <div class="bg">
                <div class="title">
                    <img src="../assets/wdc.png" alt="">
                    <span>我的城</span>
                </div>
                <div class="xyytf">
                    <div>相约游团风</div>
                    <div>查看更多<img src="../assets/arrow_right.png" alt=""></div>
                </div>
                <div class="xyytf-content">
                    <div class="xyytf-content-left">
                        <img src="../assets/xyytf01.png" alt="">
                    </div>
                    <div class="xyytf-content-right">
                        <div class="title">龙山源果木专业合作社</div>
                        <div class="tag">
                            <span>绿色天然</span>
                            <span>水果采摘</span>
                            <span>有机</span>
                            <span>生态</span>
                        </div>
                        <div class="time">
                            <img src="../assets/time.png" alt="">
                            <span>08：00-17：00</span>
                        </div>
                        <div class="address">
                            <img src="../assets/address.png" alt="">
                            <span>团风县回龙山镇沙畈村、罗家咀村</span>
                        </div>
                        <div class="btn">
                            <button>了解详情</button>
                        </div>

                    </div>
                </div>
                <div class="xyytf-content">
                    <div class="xyytf-content-left">
                        <img src="../assets/tbcm.png" alt="">
                    </div>
                    <div class="xyytf-content-right">
                        <div class="title">同胞草莓采摘园</div>
                        <div class="tag">
                            <span>绿色天然</span>
                            <span>水果采摘</span>
                            <span>有机</span>
                            <span>生态</span>
                        </div>
                        <div class="time">
                            <img src="../assets/time.png" alt="">
                            <span>08：00-17：00</span>
                        </div>
                        <div class="address">
                            <img src="../assets/address.png" alt="">
                            <span>团风县回龙山镇沙畈村、罗家咀村</span>
                        </div>
                        <div class="btn">
                            <button>了解详情</button>
                        </div>

                    </div>
                </div>
                <div class="xyytf tdss">
                    <div>探店食宿</div>
                    <div>查看更多<img src="../assets/arrow_right.png" alt=""></div>
                </div>
                <div class="tdss-box">
                    <div class="tdss-item">
                        <img src="../assets/tdss1.png" alt="">
                        <div class="tdss-item-content">
                            <div class="title">团风觅怡酒店</div>
                            <div class="star">
                                <img src="../assets/star.png" alt="">
                                <img src="../assets/star.png" alt="">
                                <img src="../assets/star.png" alt="">
                            </div>
                            <div class="price">
                                <span><span>129-169</span>元/晚</span>
                                <button>订购</button>
                            </div>
                        </div>
                    </div>
                    <div class="tdss-item">
                        <img src="../assets/mlhk.png" alt="">
                        <div class="tdss-item-content">
                            <div class="title">茉莉花开</div>
                            <div class="star">
                                <img src="../assets/star.png" alt="">
                                <img src="../assets/star.png" alt="">
                                <img src="../assets/star.png" alt="">
                            </div>
                            <div class="price">
                                <span><span>128-178</span>元/晚</span>
                                <button>订购</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="xyytf tdss" @click="btnClick">
                    <div>摄影定制</div>
                    <div>查看更多<img src="../assets/arrow_right.png" alt=""></div>
                </div>
                <div class="tdss-box">
                    <div class="tdss-item">
                        <img src="../assets/whxd1.png" alt="">
                        <div class="tdss-item-content">
                            <div class="star">
                                <span>黄蜀郎鸡公煲</span>
                            </div>
                            <div class="title">四川火锅汤底和秘制的营养酱料，口感嫩滑爽口</div>
                        </div>
                    </div>
                    <div class="tdss-item">
                        <img src="../assets/whxd2.png" alt="">
                        <div class="tdss-item-content">

                            <div class="star">
                                <span>鹏记热干面</span>
                            </div>
                            <div class="title">用料讲究，手法精湛，口味正宗</div>
                        </div>
                    </div>
                </div>
                <div class="tdss-box">
                    <div class="tdss-item">
                        <img src="../assets/whxd3.png" alt="">
                        <div class="tdss-item-content">

                            <div class="star">
                                <span>金汤麻辣烫</span>
                            </div>
                            <div class="title">一人一锅一煮的模式，既健康卫生又风味纯正</div>
                        </div>
                    </div>
                    <div class="tdss-item">
                        <img src="../assets/whxd4.png" alt="">
                        <div class="tdss-item-content">
                            <div class="star">
                                <span>春至春归</span>
                            </div>
                            <div class="title">浓郁的茶香，丝滑的口感，回味无穷</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import icon1 from '../assets/icon1.png';
import icon2 from '../assets/icon2.png';
import icon3 from '../assets/icon3.png';
import icon4 from '../assets/icon4.png';
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import router from '../route';
const items = ref([
    { img: icon1, title: '学校简介' },
    { img: icon2, title: '专业介绍' },
    { img: icon3, title: '预约进校' },
    { img: icon4, title: '图书馆预约' },
])
console.log(items.value);
// 查看更多网红小店点击事件
const btnClick = () => {
    console.log('btnclick')
    router.push({ path: '/whxdList' })
}
</script>
<style scoped>
.box>img {
    width: 100%;
}

.content {
    padding: 6px 20px 4px;
}

.content>.bg {
    background-color: #fff;
    border-radius: 16px;
}

.content>.bg>.title {
    display: flex;
    align-items: center;
}

.content>.bg>.title>img {
    margin-right: 4px;
}

.content>.bg>.title>span {
    font-size: 18px;
    font-weight: bold;
    color: #784E23;
}

.content>.bg>.nav {
    margin-top: 14px;
    display: flex;
    justify-content: space-evenly;
}

.content>.bg>.nav>.item {
    display: flex;
    flex-direction: column;
    align-items: center;

}

.content>.bg>.nav>.item img {
    width: 56px;
}

.content>.bg>.nav>.item span {
    margin-top: 12px;

}

/* 校园风采 头部 */

.content .bg .xyfc {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    margin-top: 20px;
}

.xyfc-zyfw {
    padding: 0 10px;
}

.content .bg .xyfc>div:first-child,
.xyfc-zyfw>div:first-child {
    font-size: 14px;
    color: #784e23;
}

.content .bg .xyfc>div:last-child {
    font-size: 12px;
    color: #555555;
}

/* 校园风采 图片 */
.content .bg .xyfc-img {
    display: flex;
    justify-content: space-between;
    padding: 0 6px;
}

.content .bg .xyfc-img>div {
    width: 48.1%;
    height: 128px;
    /* background-color: #ccc; */
    /* overflow: hidden;
    border-radius: 10px; */
}

.content .bg .xyfc-img>div:last-child>img {
    height: 62px;
}

.content .bg .xyfc-img>div>img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

/* 专业服务 */
.xyfw-zyfw-content {
    display: flex;
}

.xyfw-zyfw-content div {
    width: 30%;
    padding: 10px;
}

.xyfw-zyfw-content div img {
    width: 100%;
}

.xyfw-zyfw-content div p {
    text-align: center;
    margin: 0;
}

/* 我的城 */
.content>.bg:nth-child(2) {
    margin-top: 8px;

}

.content>.bg>.xyytf {
    margin-top: 14px;
    padding: 2px 6px 2px 20px;
    display: flex;
    justify-content: space-between;
    background: linear-gradient(90deg, rgba(243, 252, 242, 0) 0%, rgba(214, 171, 129, 1) 100%);
}

.content>.bg>.xyytf>div {
    color: #784e23;
}

.content>.bg>.xyytf img {
    margin-left: 10px;
}

.content>.bg>.xyytf-content {
    display: flex;
    background-color: #fff;
    border-radius: 8px;
    border: 0.5px solid rgba(120, 78, 35, 1);
    padding: 6px;
    margin-top: 6px;
}

.content>.bg>.xyytf-content>.xyytf-content-left {
    width: 40%;
    display: flex;
    align-items: center;
}

.content>.bg>.xyytf-content>div.xyytf-content-left img {
    width: 100%;
}

.content>.bg>.xyytf-content>.xyytf-content-right {
    width: 60%;
    font-size: 12px;
    padding-left: 6px;
}

.content>.bg>.xyytf-content>.xyytf-content-right .title {
    font-size: 16px;
    font-weight: bold;
    color: #000;
}

.content>.bg>.xyytf-content>.xyytf-content-right .tag {
    margin: 8px 0;
}

.content>.bg>.xyytf-content>.xyytf-content-right .tag span {
    background-color: #fbf8f8;
    margin-left: 4px;
    padding: 2px;
}

.content>.bg>.xyytf-content>.xyytf-content-right .tag span:first-child {
    margin-left: 0;
}

.content>.bg>.xyytf-content>.xyytf-content-right .time,
.address {
    display: flex;
    align-items: center;
}

.content>.bg>.xyytf-content>.xyytf-content-right .btn {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.content>.bg>.xyytf-content>.xyytf-content-right .btn button {
    width: 100px;
    height: 30px;
    border-radius: 20px;
    background: rgba(120, 78, 35, 1);
    color: #fff;
}

/* 探店食宿 */
.content>.bg .tdss-box {
    display: flex;
    justify-content: space-between;
}

.content>.bg .tdss-box .tdss-item {
    width: 48%;
    /* height: 174px; */
    background-color: #FFF6EB;
    border-radius: 10px;
}

.content>.bg .tdss-box .tdss-item>img {
    width: 100%;
    height: 120px;
}

.content>.bg .tdss-box .tdss-item .tdss-item-content {
    padding: 0 12px 10px 7px;
}

.content>.bg .tdss-box .tdss-item .tdss-item-content .title {
    font-size: 12px;
}

.content>.bg .tdss-box .tdss-item .tdss-item-content .star>img {
    margin-right: 3px;
}

.content>.bg .tdss-box .tdss-item .tdss-item-content .price {
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content>.bg .tdss-box .tdss-item .tdss-item-content .price>button {

    border-radius: 20px;
    background: rgba(120, 78, 35, 1);
    color: #fff;
    padding: 0px 8px;
}
</style>